<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
    img{
        width: 200px;
        height: 200px;
    }
    .money{
        position: absolute;
        top: 0;
    }
    .shop{
        float: left;
    }
</style>
<body>
    <div id="main">
        <app :kinddetail="kinddetail.goods1" :kindname="kindname.name1"><img src="https://img14.360buyimg.com/n0/jfs/t1/146897/21/25451/72030/624e5adfEa4208a43/dd88b4edb6891706.jpg" alt=""></app>
        <app :kinddetail="kinddetail.goods2" :kindname="kindname.name2"></app>
    </div>
</body>
<script>
    let kindlist={
        props:['kinddetail','bool'],
        template:'<div v-if=bool><div v-for="(key,index) in kinddetail" class="shop"><p><img :src=key.img><br>'+
        '<p>商品名：{{key.name}}</p><p>价格：{{key.price}}</p><p>详情：{{key.introduce}}</p></div></div>'
    }
    let app={
        props:['kinddetail','kindname'],
        template:'<div><slot><p style="color:red;font-weight:700" class="money">没钱就滚</p></slot>'+
            '<div  @click="clickbool()">{{kindname}}<kindlist :kinddetail="kinddetail" :bool="bool"></kindlist></div></div>',
        components:{
            kindlist
        },
        data(){
            return {
                bool:false
            }
        },
        methods:{
            clickbool(){
                this.bool = !this.bool
            }
        }
    }

    let vm = new Vue({
        el:'#main',
        data:{
            kindname:{
                name1: '电子类',
                name2: '生活用品类',
            },
            kinddetail:{
                goods1:[{
                    name: "菠萝手机",
                    img: './img/phone.jpg',
                    price: 3600,
                    introduce:'12个摄像头超超清'
                },
                {
                    name: "八戒手机",
                    img: './img/phone.jpg',
                    price: 3600,
                    introduce:'能背媳妇，能打妖怪'
                }],
                goods2:[{
                    name: '防毒面罩',
                    img: './img/mask.jpg',
                    price: 39.9,
                    introduce:'疫情防护，别变小阳人'
                }]
            }
        },
        components:{
            app
        }
    })
</script>
</html>